---
title: Grid
description: "`Grid`は、グリッドレイアウトを管理するためのコンポーネントです。また、便利なスタイルのショートハンドが用意されています。"
storybook: components-grid--basic
source: components/grid
style: components/grid/grid.style.ts
---

```tsx preview
<Grid gap="md" templateColumns="repeat(4, 1fr)">
  <For each={Array.from({ length: 4 })}>
    {(_, index) => (
      <GridItem
        key={index}
        bg="bg.contrast"
        color="fg.contrast"
        minH="16"
        h="full"
      />
    )}
  </For>
</Grid>
```

## 使い方

:::code-group

```tsx [package]
import { Grid, GridItem } from "@yamada-ui/react"
```

```tsx [alias]
import { Grid, GridItem } from "@/components/ui"
```

```tsx [monorepo]
import { Grid, GridItem } from "@workspaces/ui"
```

:::

```tsx
<Grid>
  <GridItem />
</Grid>
```

### templateAreasを使う

```tsx preview
<Grid
  templateAreas={`
    "one one two three"
    "four five two six"
    "four seven seven eight"
  `}
  gap="md"
>
  <For each={["one", "two", "three", "four", "five", "six", "seven", "eight"]}>
    {(area, index) => (
      <GridItem
        key={index}
        bg="bg.contrast"
        color="fg.contrast"
        minH="16"
        h="full"
        area={area}
      />
    )}
  </For>
</Grid>
```

### 複数の列と行をまたがる

```tsx preview
<Grid gap="md" templateColumns="repeat(4, 1fr)" templateRows="repeat(3, 1fr)">
  <GridItem
    bg="bg.contrast"
    color="fg.contrast"
    minH="16"
    h="full"
    colSpan={2}
  />

  <GridItem
    bg="bg.contrast"
    color="fg.contrast"
    minH="16"
    h="full"
    colSpan={2}
    rowSpan={3}
  />

  <GridItem
    bg="bg.contrast"
    color="fg.contrast"
    minH="16"
    h="full"
    rowStart={2}
    rowEnd={4}
  />

  <GridItem
    bg="bg.contrast"
    color="fg.contrast"
    minH="16"
    h="full"
    colStart={2}
    colEnd={3}
    rowStart={2}
    rowEnd={4}
  />
</Grid>
```

## Props

<PropsTable name="grid" />
